<!-- 下载列表组件 -->
<template>
	<view class="download-item" :class="{ act: isAct }" @click="itemClick">
		<view class="content">
			<view v-if="iconType == 'font'" class="font-icon">
				<uni-badge class="badge" type="error" :text="badgeNum"></uni-badge>
				<view class="icon iconfont nol" :class="iconNol" :style="{ 'font-size': iconSize + 'rpx' }"></view>
				<view class="icon iconfont hor" :class="iconHor" :style="{ 'font-size': iconSize + 'rpx' }"></view>
			</view>

			<view v-if="iconType == 'img'" class="img-icon">
				<uni-badge class="badge" type="error" :text="badgeNum"></uni-badge>
				<image class="icon nol" :src="iconNol" :style="{ width: iconSize + 'rpx', height: iconSize + 'rpx' }"></image>
				<image class="icon hor" :src="iconHor" :style="{ width: iconSize + 'rpx', height: iconSize + 'rpx' }"></image>
			</view>
			<text class="text" :style="{ 'font-size': nameSize + 'rpx', color: nameColor }">{{ name }}</text>
			<!-- <button v-if="isDownLoad == false" class="btn btn-yellow downloadbtn" @click="download">下载</button> -->
			<!-- <view v-if="isDownLoad == 'ing'" class=" process">
				<view class="process-item" :style="{ width: progress + '%' }"></view>
				<view class="text">{{ progress }}%</view>
			</view>
			<button v-if="isDownLoad == true" class="btn btn-yellow downloadbtn">已完成</button> -->
		<button class="btn btn-yellow downloadbtn" @click="copyDownloadLink">复制下载链接</button>
		
		</view>
		<view class="savepath" v-if="savedFilePath">
			<view class="title">保存路径</view>
			<view class="path">{{ savedFilePath }}</view>
		</view>
	</view>
</template>

<script>
import uniBadge from '../uni-badge/uni-badge.vue';
export default {
	components: {
		uniBadge
	},
	props: {
		type: {
			type: String, //交互类型 'none' 'route' 等类型
			default: 'none'
		},
		routeLink: {
			type: String, // 路由地址
			default: ''
		},
		url: {
			type: String, // 下载地址
			default: ''
		},
		iconType: {
			// icon图标类型
			type: String, // img:图片类型 font:字体图标类型 none:没有图标
			default: 'img'
		},
		iconNol: {
			//常态图标地址 或 文字图标类名
			type: String,
			default: '/static/qita.png'
		},
		iconHor: {
			//高亮图标 或 文字图标类名
			type: String,
			default: '/static/qita.png'
		},
		iconSize: {
			type: Number,
			default: 60
		},
		isAct: {
			//是否是当前高亮
			type: Boolean,
			default: false
		},
		name: {
			type: String,
			default: '未定义'
		},
		nameSize: {
			//名字大小
			type: Number,
			default: 35
		},
		nameColor: {
			//名字颜色
			type: String,
			default: '#797B7E'
		},

		badgeNum: {
			// 标记数字
			type: Number,
			default: 0
		}
	},

	data() {
		return {
			isDownLoad: false, //是否下载完毕 (true,false,ing)
			progress: 0, //下载进度
			savedFilePath: null //保存文件地址
			// downLoadResultText:"失败" //下载结果
		};
	},
	methods: {
		itemClick() {
			// 表单元素被点击
			if (this.$props.type === 'route' && this.$props.routeLink) {
				// 路由跳转
				console.log('跳转地址', this.$props.routeLink);
			} else {
			}
		},
		copyDownloadLink(){
			// 复制下载链接
			if(this.url)
			uni.setClipboardData({
			    data: this.url,
			    success: ()=> {
			        console.log('复制成功');
			    }
			});
		},
		download() {
			// 下载
			this.isDownLoad = 'ing';
			const downloadTask = uni.downloadFile({
				url: this.url,
				success: res => {
					if (res.statusCode === 200) {
						console.log('下载成功', res);
						const tempFilePath = res.tempFilePath;
						uni.saveFile({
							tempFilePath: tempFilePath,
							success: res => {
								console.log('保存成功', res);
								this.savedFilePath = res.savedFilePath;
								this.isDownLoad = true;
							},
							fail: err => {
								this.isDownLoad = false;
							}
						});
					}
				},
				fail: err => {
					console.log('下载失败', err);
					uni.showToast({
						mask: true,
						duration: 2000,
						title: '下载失败'
					});
					this.isDownLoad = false;
				}
			});

			downloadTask.onProgressUpdate(res => {
				console.log('下载进度' + res.progress);
				console.log('已经下载的数据长度' + res.totalBytesWritten);
				console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				this.progress = res.progress;
			});
		}
	},
	mounted() {
		console.log('iconType', this.$props.iconType);
	}
};
</script>

<style lang="scss" scoped>
.download-item {
	.content {
		// width: 100%;
		// flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx 20rpx;
		position: relative;
		.arrow {
			display: flex;
		}
		.font-icon,
		.img-icon {
			width: 36rpx;
			// height: 36rpx;
			// background-color: #ddd;
			border-radius: 50%;
			line-height: 36rpx;
			position: relative;
			margin-right: 20rpx;
			.badge {
				position: absolute;
				right: 0;
				top: 0;
			}

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				color: #ffffff;
				font-size: 25rpx;
			}

			.nol {
				display: flex;
			}

			.hor {
				display: none;
			}
		}

		.text {
			// width: 90%;
			width: 55%;
			word-break: break-all;
			color: #46494d;
			box-sizing: border-box;
			padding-left: 20rpx;
			font-size: 35rpx;
			line-height: 1;
		}

		.downloadbtn {
			position: absolute;
			right: 20rpx;
		}

		.process {
			position: absolute;
			right: 20rpx;
			width: 140rpx;
			height: 52rpx;
			border-radius: 6px;
			overflow: hidden;
			.process-item {
				display: block;
				position: absolute;
				height: 100%;
				background-color: #e9c846;
				z-index: 1;
				border-color: #efeff0;
			}
			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				width: 100%;
				height: 100%;
				color: #46494d;
				z-index: 2;
			}
		}
	}
}

.savepath {
	.title {
		font-size: 30rpx;
		font-weight: bolder;
		color: #333;
		padding-left: 16rpx;
		padding-bottom: 16rpx;
		border-bottom: 2rpx dashed #efeff0;
	}
	.path {
		font-size: 30rpx;
		color: #a4a6a7;
		/* white-space: pre-wrap; */
		word-break: break-all;
		padding: 16rpx;
	}
}

// .download-item:hover,
.download-item.act {
	.font-icon,
	.img-icon {
		.nol {
			display: none;
		}

		.hor {
			display: flex;
		}
	}

	.text {
	}
}
</style>
